import React from 'react';
import { observer, inject } from 'mobx-react';
import { Icon } from 'weaver-mobile';
import './style/index.less';
import jQuery from 'jquery';

@inject('wfGlobalStore')
export default class WfHelpfulTip extends React.Component {

    componentDidMount() {
        let contentHeight = jQuery(".mask-content").height();
        let spanHeight = jQuery(".mask-content span").height();
        let lines = spanHeight / 16;
        if (contentHeight <= 90) {
            let marginTop = "0px";
            switch (lines) {
                case 1: marginTop = "36px"; break;
                case 2: marginTop = "30px"; break;
                case 3: marginTop = "24px"; break;
                case 4: marginTop = "16px"; break;
                case 5: marginTop = "6px"; break;
                default: marginTop = "36px";
            }
            jQuery(".mask-content span").css("margin-top", marginTop)
        }
    }

    render() {
        const { variableMap } = this.props.wfGlobalStore;
        let content = variableMap.get("helpful-tip-content") || "";
        return (<div className='wf-helpful-tip-mask'>
            <div className='mask-content-wrap'>
                <div className="mask-content">
                    <span dangerouslySetInnerHTML={{ __html: content }}></span>
                </div>
                <div className='mask-close'>
                    <Icon type='cross-circle-o' color='#424242' onClick={this.onClickClose} />
                </div>
            </div>
        </div>)
    }
    onClickClose = () => {
        const { variableMap, batchControlVariableMap } = this.props.wfGlobalStore;
        let closeCallback = variableMap.get("helpful-tip-closeCallback")
        if (typeof closeCallback === "function") closeCallback();
        batchControlVariableMap({
            "helpful-tip-visiable": false,
            "helpful-tip-content": "",
            "helpful-tip-closeCallback": null
        });
    }
}
